<template>
    <div class="container" v-cloak>
        <div class="blurBg" :style="{background:'url('+blurBg+') 0 0 no-repeat'}"></div>
        <div class="dataInfo">
            <div class="mainInfo">
                <div class="swiper-container" v-if="homework.otherArr&&homework.otherArr.length>1">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" v-for="(slide,index) in homework.otherArr"
                             @click.stop="clientSwiper(homework.otherArr,index)">
                            <img v-lazy="imagedomain+slide.imgUrl+'?imageView2/0/w/622/format/jpeg'" v-if="slide.type==1" class="picesItem"/>
                            <img v-lazy="imagedomain+slide.imgUrl+'?vframe/jpeg/offset/1/w/750/'" v-if="slide.type==3"
                                 class="picesItem"/>
                            <img src="../../images/play.png" class="play" v-if="slide.type==3"/>
                        </div>
                    </div>
                </div>
                <div class="oneImgBg" v-if="homework.otherArr&&homework.otherArr.length==1"
                     @click.stop="clientSwiper(homework.otherArr,0)">
                    <img v-lazy="imagedomain+homework.otherArr[0].imgUrl+'?imageView2/0/w/622/format/jpeg'" v-if="homework.otherArr[0].type==1"/>
                    <img v-lazy="imagedomain+homework.otherArr[0].imgUrl+'?vframe/jpeg/offset/1/w/750/'"
                         v-if="homework.otherArr[0].type==3" class="picesItem"/>
                    <img src="../../images/play.png" class="play" v-if="homework.otherArr[0].type==3"/>
                </div>
                <ul class="audioArea">
                    <li class="audioItem" v-if="homework.audioArr&&homework.audioArr.length>0"
                        v-for="(audioItem,audioIndex) in homework.audioArr">
                        <audio-player :url="audioItem.imgUrl" :time="audioItem.time" :audioId="audioItem.imgUrl"
                                      ref="audio" @closeAllAudio="closeAllAudio"></audio-player>
                    </li>
                </ul>
                <div class="title" flex="main:justify cross:center">
                    <div flex="main:center cross:center">
                        <img :src="sendTeacher.userPhoto+'?imageView2/0/w/80/format/jpeg'" class="titlePhoto"/>
                        <div class="font13" v-text="sendTeacher.nickName"></div>
                    </div>
                    <div>
                        <div class="titleText" v-if="homework.beginTime">作业开始时间 <span
                                v-text="$util.changeDate(homework.beginTime)"></span></div>
                        <div class="titleText" v-if="homework.endTime">作业结束时间 <span
                                v-text="$util.changeDate(homework.endTime)"></span></div>
                    </div>
                </div>
                <div class="newTitle font12" v-if="homework.title" v-text="homework.title"></div>
                <div class="content" v-html="homework.content"></div>
                <div class="centerCtrl">
                    <div class="userCtrl" flex>
                        <div flex="cross:center" flex-box="1" @click="clickZan()">
                            <img src="../../images/zan.png" class="zan" v-if="!homework.ifFocus"/>
                            <img src="../../images/zan_sel.png" class="zan" v-if="homework.ifFocus"/>
                            <div class="panelText">点赞</div>
                        </div>
                        <div flex="cross:center main:center" flex-box="1" @click="setComment('',0)">
                            <img src="../../images/question.png" class="qes"/>
                            <div class="panelText">提问</div>
                        </div>
                        <div flex="cross:center main:right" flex-box="1" @click="shareTch()">
                            <img src="../../images/share.png" class="share"/>
                            <div class="panelText">分享</div>
                        </div>
                    </div>
                    <div :class="{commentWrap:homework.commentList.length>0}" v-if="homework">
                        <commentList :text="'提问 '" :commentObj="homework" :type="'APP_HOMEWORK'" :index="0"
                                     :classId="classId" v-if="homework" ref="selfCommentList"></commentList>
                    </div>
                </div>
            </div>
            <div class="homeworkList">
                <ul>
                    <li class="homeworkItem" v-for="(list,index) in replyList">
                        <div flex="main:justify cross:center" class="listTitle" @click="toStudentDetail(list)">
                            <div flex="cross:center">
                                <img :src="list.studentDTO.photoUrl+'?imageView2/0/w/80/format/jpeg'"
                                     v-if="list.studentDTO" class="listPhoto"/>
                                <div>
                                    <div class="font13" v-text="list.studentDTO.studentName"
                                         v-if="list.studentDTO"></div>
                                    <div class="listTime" v-text="$util.getDate(list.createTime)"></div>
                                </div>
                            </div>
                            <div class="setComment" flex="main:center cross:center" v-if="role!=1"
                                 @click.stop="setComment(index,list.tid)">点评
                            </div>
                        </div>
                        <ul class="listPices">
                            <li class="listPicesItem" v-for="(pic,index) in list.detailList" v-if="pic.type!==2"
                                @click.stop="clientSwiper(list.detailList,index)">
                                <img v-lazy="imagedomain+pic.imgUrl+'?imageView2/0/w/160/format/jpeg'" v-if="pic.type==1" class="picesItem"/>
                                <img v-lazy="imagedomain+pic.imgUrl+'?vframe/jpeg/offset/1/w/750/'" v-if="pic.type==3"
                                     class="picesItem"/>
                                <img src="../../images/play.png" class="play" v-if="pic.type==3"/>
                            </li>
                        </ul>
                        <ul>
                            <li class="audioItem" v-if="audioItem.type===2"
                                v-for="(audioItem,audioIndex) in list.detailList">
                                <audio-player :url="audioItem.imgUrl" :time="audioItem.time" :audioId="audioItem.imgUrl"
                                              ref="audio" @closeAllAudio="closeAllAudio"></audio-player>
                            </li>
                        </ul>
                        <div class="homeworkItemDes" v-html="list.content" @click="toStudentDetail(list)"></div>
                        <commentList :text="'点评 '" :commentObj="list" :type="'APP_HOMEWORK'" :index="index"
                                     :classId="classId" :noReply="1" ref="commentMethod"></commentList>
                        <div class="listPicesLine"></div>
                    </li>
                </ul>
            </div>
            <div v-if="role!=1">
                <div class="allSetComment" flex="main:center cross:center" @click="setComment(-1)">一键全部点评</div>
                <div class="unSubmitList" v-if="unReplyStudents.length>0">
                    <div class="showText">尚未提交作业学员</div>
                    <ul class="nameList">
                        <li v-for="name in unReplyStudents" v-text="name.studentName"></li>
                    </ul>
                </div>
            </div>
            <div class="canSeePanel" flex="main:justify cross:center" v-if="role==1">
                <div class="showText">作业相互可见</div>
                <div flex="cross:center">
                    <div class="canSeeText">不公开</div>
                    <div class="panelWrap" flex="cross:center" :class="{panelWrapFocus:ifPub==1}"
                         @click="setHomeworkPub(ifPub)">
                        <div class="panel"></div>
                    </div>
                    <div class="canSeeText">公开</div>
                </div>
            </div>
            <div class="allBottomBtn" flex="main:center cross:center"
                 v-if="role==1 && !selfSubmit && nowTime>homework.beginTime && nowTime<homework.endTime"
                 @click="toHomeworkCtrl">提交我的作业
            </div>
            <div class="allBottomBtn" flex="main:center cross:center"
                 v-if="role==1 && selfSubmit && nowTime>homework.beginTime && nowTime<homework.endTime"
                 @click="toHomeworkCtrl">修改我的作业
            </div>
            <div class="allBottomBtn" flex="main:center cross:center" v-if="role==1 && nowTime>homework.endTime" v-text="selfSubmit?'已提交':'已完结'"></div>
            <shareModel :appName="'作业'" :appCode="'APP_HOMEWORK'"
                        :imgUrl="homework.otherArr&&homework.otherArr.length>0?homework.otherArr[0].type==1?imagedomain+homework.otherArr[0].imgUrl:imagedomain+homework.otherArr[0].imgUrl+'?vframe/jpeg/offset/1/w/80':''"
                        :id="'&workId='+appId+'&replyId='+replyId" :shareUrl="shareMain" :role="role" :ifReply="'true'"
                        v-if="homework"></shareModel>
        </div>
    </div>
</template>
<script type="text/babel">
    import API from '../../../api/api.js'
    import {imagedomain, domain} from '../../../api/api.js'
    import commentList from '../../../components/commentList.vue'
    const api = new API();
    import '../../../vendor/js/swiper.min.js'
    import shareModel from '../../../components/shareModel.vue'
    import audioPlayer from '../../../components/audioComponent.vue'
    export default{
        data(){
            return {
                replyList: [],
                unReplyStudents: [],
                imagedomain: imagedomain,
                domain: domain,
                sendTeacher: '',
                homework: '',
                classId: this.$route.query.classId? this.$route.query.classId : '',
                appId: this.$route.query.appId ? this.$route.query.appId : this.$route.query.tid,
                replyId: '',
                role: this.$route.query.role?this.$route.query.role:'',
                ifPub:'',
                selfSubmit: false,
                organization: '',
                homeworkClass: '',
                shareInfo:'',
                shareUserName: '',
                shareUrl: '',
                shareMain: '',
                nowTime: ''
            }
        },
        mounted(){
            this.$util.jsBridgeCallBack('jsLeftAction', this.closeWebView);
            this.getData();
            this.$nextTick(function () {
                setTimeout(()=>{
                    this.propsTitle();
                },400)
            })
        },
        components: {
            shareModel,
            commentList,
            audioPlayer
        },
        methods: {
            closeWebView() {
                this.$util.JsBridge('closeWebView', {}, ()=> {})
                this.$util.JsBridge('refreshAppCellInfo',{},()=>{})
            },
            propsTitle(){
                this.$util.JsBridge('propsTitle', {
                    title: '作业',
                }, (res) => {
                })
            },
            closeAllAudio(){
                this.$refs.audio.forEach((el, elIndex) => {
                    this.$refs.audio[elIndex].closeAudio();
                });
            },
            getData(){
                let param = {
                    classId: this.classId,
                    workId: this.appId,
                    role: this.role
                }
                api.getHomeworkDetail(param).then(res => {
                    let {code, rs} = res;
                    if (code == 200) {
                        if (rs.sendTeacher.userPhoto === '') {
                            rs.sendTeacher.userPhoto = this.$util.getDefaultHeader(rs.sendTeacher.userId)
                        }
                        this.sendTeacher = rs.sendTeacher;
                        rs.homework.isSlide=true;
                        if (rs.homework) {
                            rs.homework.audioArr = [];
                            rs.homework.otherArr = [];
                            if(rs.homework.pices){
                                rs.homework.pices = JSON.parse(rs.homework.pices);
                                rs.homework.pices.forEach((el, index) => {
                                    if (el.type == 2) {
                                        rs.homework.audioArr.push(el)
                                    } else {
                                        rs.homework.otherArr.push(el)
                                    }
                                })
                            }
                        }
                        this.nowTime = res.timestamp;
                        this.homework = rs.homework;
                        this.homeworkClass = rs.homeworkClass;
                        this.organization = rs.organization;
                        if (rs.replyList) {
                            this.replyList = rs.replyList;
                        } else {
                            this.replyList = [];
                        }
                        this.shareMain = rs.shareMain;
                        this.shareUrl = rs.shareUrl;
                        this.shareUserName = rs.shareUserName;
                        if(rs.unReplyStudents){
                            this.unReplyStudents = rs.unReplyStudents;
                        }
                        if (rs.selfReply) {
                            rs.selfReply.myself = true;
                            this.ifPub=rs.selfReply.ifPub;
                            this.replyId = rs.selfReply.tid;
                            this.replyList.unshift(rs.selfReply);
                            this.selfSubmit = true;
                        }
                        if (this.replyList) {
                            this.replyList.map((e) => {
                                if (e.studentDTO.photoUrl === '') {
                                    e.studentDTO.photoUrl = this.$util.getDefaultHeader(e.studentDTO.studentId)
                                }
                            })
                        }
                        this.$nextTick(function () {
                            new Swiper('.swiper-container', {
                                slidesPerView: 1.2,
                                spaceBetween: 8,
                                observer: true,
                                observeParents: true,
                            });
                            document.documentElement.scrollTop=1;
                            document.body.scrollTop=1;
                        })
                    }else{
                        this.$util.sendLog(1,'APP_HOMEWORK',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'作业',code:'APP_HOMEWORK',path: '/app/homework/detail',api:'getHomeworkDetail',success:false,data:res}));
                    }
                }).catch(()=>{
                    this.$util.sendLog(1,'APP_HOMEWORK',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'作业',code:'APP_HOMEWORK',path: '/app/homework/detail',api:'getHomeworkDetail',success:false,data:'网络异常'}));
                })
            },
            toHomeworkCtrl(){
                this.$router.push({
                    path: '/app/homework/add',
                    query: {workId: this.appId, classId: this.classId, replyId: this.replyId, role: this.role,isDetail:1}
                })
            },
            setHomeworkPub(ifPub){
                if(this.replyId==''){
                    this.$toast('您还未提交作业哦!')
                    return
                }
                ifPub == 1 ? ifPub = 2 : ifPub = 1;
                let param = {
                    replyId: this.replyId,
                    ifPub: ifPub
                }
                api.setHomeworkPub(param).then(res => {
                    let {code, rs} = res;
                    if (code == 200) {
                        this.ifPub == 2 ? this.ifPub = 1 : this.ifPub = 2;
                    }else{
                        this.$util.sendLog(1,'APP_HOMEWORK',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'作业',code:'APP_HOMEWORK',path: '/app/homework/detail',api:'setHomeworkPub',success:false,data:res}));
                    }
                }).catch(()=>{
                    this.$util.sendLog(1,'APP_HOMEWORK',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'作业',code:'APP_HOMEWORK',path: '/app/homework/detail',api:'setHomeworkPub',success:false,data:'网络异常'}));
                })
            },
            toStudentDetail(obj){
                if (this.role == 1) {
                    if (obj.myself) {
                        this.$router.push({
                            path: '/app/homework/studentDetail',
                            query: {replyId: obj.tid, role:1,classId:this.classId}
                        })
                    }
                } else {
                    this.$router.push({
                        path: '/app/homework/studentDetail',
                        query: {replyId: obj.tid, role:this.role,classId:this.classId}
                    })
                }
            },
            clientSwiper(pices, index){
                let arr = Array.prototype.toString.call(pices) === '[object String]' ? JSON.parse(JSON.stringify(JSON.parse(pices))) : JSON.parse(JSON.stringify(pices))
                arr.forEach(function (e) {
                    e.imgUrl = imagedomain + e.imgUrl;
                    if (e.type == 3) {
                        e.coverUrl = imagedomain + e.imgUrl + '?vframe/jpeg/offset/1';
                    }
                });
                this.$util.JsBridge('picesSwiper', {
                    picesList: arr,
                    picesIndex: index
                }, (res) => {
                })
            },
            shareTch(){
                let param = {
                    shareCode: 'APP_HOMEWORK',
                    classId: this.classId,
                    tid:this.appId
                };
                api.getShareInfo(param).then(res => {
                    let {code, rs} = res;
                    if (code == 200) {
                        this.shareInfo=rs;
                    }else{
                        this.$util.sendLog(1,'APP_HOMEWORK',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'作业',code:'APP_HOMEWORK',path: '/app/homework/detail',api:'getShareInfo',success:false,data:res}));
                    }
                }).then(()=>{
                    this.$util.JsBridge('share', {
                        imgUrl: this.homework.otherArr.length > 0 ? this.homework.otherArr[0].type == 1 ? imagedomain + this.homework.otherArr[0].imgUrl : imagedomain + this.homework.otherArr[0].imgUrl + '?vframe/jpeg/offset/1/w/80' : '',
                        title: this.shareInfo.title,
                        content:this.shareInfo.content,
                        type: -1,
                        shareUrl: this.shareMain + '&appId=' + this.appId + '&role=' + this.role + '&ifReply=false',
                        tid: this.appId
                    }, (res) => {
                    })
                }).catch(()=>{
                    this.$util.sendLog(1,'APP_HOMEWORK',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'作业',code:'APP_HOMEWORK',path: '/app/homework/detail',api:'getShareInfo',success:false,data:'网络异常'}));
                })
            },
            clickZan(){
                let param = {
                    focusType: 101,
                    appId: this.appId,
                }
                this.homework.ifFocus ?
                    api.cancelZan(param).then(res => {
                        let {code} = res;
                        if (code == 200) {
                            this.homework.ifFocus = false;
                        }else{
                            this.$util.sendLog(1,'APP_HOMEWORK',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'作业',code:'APP_HOMEWORK',path: '/app/homework/detail',api:'cancelZan',success:false,data:res}));
                        }
                    }).catch(()=>{
                        this.$util.sendLog(1,'APP_HOMEWORK',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'作业',code:'APP_HOMEWORK',path: '/app/homework/detail',api:'cancelZan',success:false,data:'网络异常'}));
                    }) : api.clickZan(param).then(res => {
                    let {code} = res;
                    if (code == 200) {
                        this.homework.ifFocus = true;
                    }else{
                        this.$util.sendLog(1,'APP_HOMEWORK',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'作业',code:'APP_HOMEWORK',path: '/app/homework/detail',api:'cancelZan',success:false,data:res}));
                    }
                }).catch(()=>{
                        this.$util.sendLog(1,'APP_HOMEWORK',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'作业',code:'APP_HOMEWORK',path: '/app/homework/detail',api:'cancelZan',success:false,data:'网络异常'}));
                    })
            },
            setComment(index, replyId){
                if(index===-1&&this.replyList.length==0){
                    this.$toast('还没有学员提交作业哦!');
                    return;
                }
                this.$util.JsBridge('setComment', {
                        limit: 500,
                        placeHolder: '请输入500字以内评论'
                    }, (result) => {
                        let data = {};
                        if (result.content === '') {
                            this.$toast('评论内容不能为空')
                        } else {
                            data.type = result.type;
                            if (data.type == 2) {
                                data.time = result.time;
                            }
                            data.content = this.$util.utf16toEntities(result.content);
                            let secIdList = [];
                            if (index === -1) {
                                this.replyList.map((e) => {
                                    secIdList.push(e.tid)
                                })
                                secIdList = secIdList.join(',')
                            }
                            const param = {
                                classId: this.classId,
                                type: data.type,
                                appId: this.appId,
                                secId: index === -1 ? '' : replyId,
                                secIds: index === -1 ? secIdList : '',
                                content: data.content,
                                appCode: 'APP_HOMEWORK'
                            }
                            if(index==''&&replyId==0){
                                param.revUserId=this.homework.userId
                            }
                            if (result.type == 2) {
                                param.time = result.time;
                            }
                            let logApi=index === -1?'setAllComment':'setComment';
                            let response = index === -1 ? api.setAllComment(param) : api.setComment(param);
                            response.then((res) => {
                                let {code, rs} = res;
                                if (code === 200) {
                                    if (index === '') {
                                        this.$refs.selfCommentList.sonSetComment(rs)
                                    } else if (index === -1) {
                                        this.replyList.map((e, elIndex) => {
                                            this.$refs.commentMethod[elIndex].sonSetComment(rs);
                                        })
                                    } else {
                                        this.$refs.commentMethod[index].sonSetComment(rs);
                                    }
                                }else{
                                    this.$util.sendLog(1,'APP_HOMEWORK',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'作业',code:'APP_HOMEWORK',path: '/app/homework/detail',api:logApi,success:false,data:res}));
                                }
                            }).catch(()=>{
                                this.$util.sendLog(1,'APP_HOMEWORK',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'作业',code:'APP_HOMEWORK',path: '/app/homework/detail',api:logApi,success:false,data:'网络异常'}));
                            })
                        }
                    }
                )
            },
        }
    }
</script>
<style scoped lang="scss">
    .audioArea {
        padding-left: 0.12rem;
    }

    .audioItem {
        padding-top: 0.08rem;
    }

    .container {
        width: 100%;
        height: 100%;
        background: #000;
        position: relative;
    }

    .swiper-slide {
        height: 2rem;
        overflow: hidden;
        background: #d8d8d8;
        .picesItem {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    .oneImgBg {
        width: 100%;
        height: 2rem;
        overflow: hidden;
        position: relative;
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    .title {
        padding: 0.12rem;
        .titlePhoto {
            background: #d8d8d8;
            width: 0.31rem;
            height: 0.31rem;
            border-radius: 100%;
            margin-right: 0.09rem;
        }
        .titleText {
            font-size: 0.1rem;
            color: #fff;
            opacity: 0.5;
        }
    }
    .newTitle{
        padding: 0.08rem 0.12rem;
    }
    .content {
        font-size: 0.13rem;
        opacity: 0.5;
        padding: 0 0.12rem;
    }

    .centerCtrl {
        border-bottom: 0.5px solid rgba(255, 255, 255, .2);
    }

    .commentWrap {
        padding: 0 0.12rem 0.06rem 0.12rem;
    }

    .userCtrl {
        padding: 0.12rem;
    }

    .zan {
        width: 0.15rem;
        height: 0.14rem;
    }

    .qes {
        width: 0.16rem;
        height: 0.16rem;
    }

    .share {
        width: 0.14rem;
        height: 0.13rem;
    }

    .panelText {
        margin-left: 0.07rem;
        font-size: 0.1rem;
    }

    .homeworkList {
        padding: 0.12rem 0 0.12rem 0.12rem;
        .homeworkItem {
            padding-top: 0.12rem;
        }
        .homeworkItemDes {
            margin-top: 0.12rem;
            margin-bottom: 0.04rem;
            font-size: 0.12rem;
        }
    }

    .listTitle {
        padding-right: 0.12rem;
        .listPhoto {
            width: 0.34rem;
            height: 0.34rem;
            border-radius: 100%;
            margin-right: 0.1rem;
        }
        .listTime {
            font-size: 0.1rem;
            opacity: 0.5;
        }
        .setComment {
            background: rgba(255, 255, 255, .16);
            border-radius: 0.06rem;
            width: 0.49rem;
            height: 0.21rem;
            font-size: 0.11rem;
            font-family: PingFangSC-Medium;
        }
    }

    .listPices {
        margin-top: 0.12rem;
        width: 100%;
        background: transparent;
        display: inline-flex;
        display: -webkit-box;
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
        .listPicesItem {
            position: relative;
            background: #d8d8d8;
            width: 1rem;
            height: 1rem;
            margin-right: 0.08rem;
            overflow: hidden;
            .picesItem {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }

    .listPicesLine {
        background: rgba(255, 255, 255, .2);
        width: 3.63rem;
        height: 0.5px;
        margin-top: 0.08rem;
    }

    .allSetComment {
        margin-top: 0.08rem;
        margin-left: 1.41rem;
        margin-bottom: 0.12rem;
        background: rgba(255, 255, 255, .16);
        border-radius: 0.06rem;
        width: 0.94rem;
        height: 0.23rem;
        font-family: PingFangSC-Medium;
        font-size: 0.11rem;
    }

    .showText {
        font-size: 0.12rem;
        opacity: 0.5;
        padding-left: 0.12rem;
    }

    .unSubmitList {
        border-bottom: 0.5px solid rgba(255, 255, 255, .2);
    }

    .nameList {
        padding-left: 0.12rem;
        margin-top: 0.06rem;
        overflow: hidden;
        li {
            float: left;
            margin-right: 0.2rem;
            margin-bottom: 0.12rem;
            font-size: 0.12rem;
        }
    }

    .canSeePanel {
        padding: 0.12rem 0.12rem 0.12rem 0;
        border-bottom: 0.5px solid rgba(255, 255, 255, .2);
    }

    .canSeeText {
        font-size: 0.1rem;
        opacity: 0.5;
    }

    .panelWrap {
        margin: 0 0.06rem;
        border-radius: 0.54rem;
        width: 0.37rem;
        height: 0.19rem;
        -webkit-animation: changeWrap 0.5s;
        -webkit-animation-fill-mode: forwards;
        .panel {
            background: #ffffff;
            width: 0.16rem;
            height: 0.16rem;
            border-radius: 100%;
            -webkit-animation: changePanel 0.3s;
            -webkit-animation-fill-mode: forwards;
        }
    }

    .panelWrapFocus {
        background:#17A5AF;
        margin: 0 0.06rem;
        border-radius: 0.54rem;
        width: 0.37rem;
        height: 0.19rem;
        -webkit-animation: changeWrapFocus 0.5s;
        -webkit-animation-fill-mode: forwards;
        .panel {
            background: #ffffff;
            width: 0.16rem;
            height: 0.16rem;
            border-radius: 100%;
            -webkit-animation: changePanelFocus 0.3s;
            -webkit-animation-fill-mode: forwards;
        }
    }

    @-webkit-keyframes changePanelFocus {
        from {
            -webkit-transform: transLateX(0.02rem)
        }
        to {
            -webkit-transform: transLateX(0.19rem)
        }
    }

    @-webkit-keyframes changePanel {
        from {
            -webkit-transform: transLateX(0.19rem)
        }
        to {
            -webkit-transform: transLateX(0.02rem)
        }
    }

    @-webkit-keyframes changeWrapFocus {
        from {
            background: rgba(255, 255, 255, 0.16)
        }
        to {
            background:#17A5AF;
        }
    }


    @-webkit-keyframes changeWrap {
        from {
            background:#17A5AF;
        }
        to {
            background: rgba(255, 255, 255, 0.16)
        }
    }
</style>